<template>
  <h1>诊断表</h1>
  <div id="treatMent">
    <el-form :model="form" label-width="auto" size="large">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <!-- <el-form-item label="Activity zone">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="身份证号码">
        <el-input v-model="form.id" />
      </el-form-item>
      <el-form-item label="就诊科室">
        <el-input v-model="form.company" />
      </el-form-item>

      <el-form-item label="患者主诉">
        <el-input v-model="form.patientMain" />
      </el-form-item>

      <el-form-item label="过敏史">
        <el-input
          v-model="form.desc"
          type="textarea"
          size="large"
          :rows="2"
          style="width: 500px"
        />
      </el-form-item>

      <el-form-item label="体检情况">
        <el-input v-model="form.physical" />
      </el-form-item>

      <el-form-item label="辅助检查">
        <el-input v-model="form.auxiliary" />
      </el-form-item>

      <el-form-item label="诊疗意见">
        <el-input v-model="form.diagnosis" />
      </el-form-item>

      <h2>处方选择</h2>
      <div style="text-align: center" class="edit_fei">
    <el-transfer filterable v-model="value" :data="data" @change="handleChange">
      <template #default="{ option }" >
        <div class="test"><span> {{ option.label }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格：{{ option.price }} </span>
          <el-input-number  v-model="option.number" size="small" /></div>
        </template>
    </el-transfer>

    </div>

      <div class="flex gap-4 mb-4" style="margin-top: 5%">
        <span>花费金额</span>
        <el-input
          v-model="allPrice"
          style="width: 240px; margin-left: 5%"
          disabled
        />
      </div>

      <el-form-item style="margin-left: 250px; margin-top: 5%">
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script lang="ts" setup>
import service from '@/request'
import { computed, reactive, watch } from 'vue'
import { onMounted } from 'vue'
import { ref } from 'vue'
// import service from "../request/index";
import { useRoute } from 'vue-router'
import store from '../store'
import { disabledTimeListsProps } from 'element-plus/es/components/time-picker/src/props/shared'
import { ElMessage } from 'element-plus'
const route = useRoute()
const value = ref([])
const form = reactive({
  name: '',
  id: '',
  company: '',
  patientMain: '',
  physical: '',
  auxiliary: '无',
  diagnosis: '',
  region: '',
  desc: '',
  payment: 0,
})
// watch(value,()=>{
//   console.log(value.value)
//   var a = 0;
//   value.value.forEach(index => {
//     // console.log(data.value[index])
//     a + data.value[index].price * data.value[index].number
//   });  
//   console.log(a)
// })
 // 总价
 const allPrice = computed(() => {
      let sum = 0;
      // 遍历数据 将每一项的价格乘以数量再累加
      value.value.forEach((item) => {
        console.log(item)
        sum += data.value[item].price * data.value[item].number
      });
      return sum;
    });
console.log(allPrice)
onMounted(() => {
  console.log(route.query.id)
  form.name = route.query.name
  form.id = route.query.id
  form.company = store.state.user.loginUser.PartMent
  // Medicinements();
})
//   console.log(id.value)
// do not use same name with ref
const medicines = () => {
  var a = ''
  value.value.forEach((item) => {
        console.log(item)
        a += data.value[item].label +' * ' + data.value[item].number + '     '
  });
console.log(a)
return a
}
const onSubmit = async () => {
 // 构造请求体数据
  console.log(medicines())
 const postData = {
    patientId: form.id,
    medicines: medicines(),
    price: allPrice.value,
  }
  console.log(postData)
  await service.post('/Diagnosis/doDiagnosis', postData)
    .then((response) => {
      console.log(response)
      ElMessage.success('提交成功')
     })
    .catch((error) => {
      console.error(error)
      ElMessage.error('提交失败')
    })
  // console.log('submit!')
}

// const getPayment = () => {
//   console.log('!')
// }

// 处方

// 获取后端预约数据
const Medicinements = async (data) => {
  console.log("获取数据");
  try {
    const response = await service.get("/Medicine/AllMedicinesInfo");
    // 假设response的结构是药物信息的对象数组，例如 [{ id, name, price }, ...]
    console.log(response)
    for (let i = 0; i < response.data.length; i++) {
      data.value.push({
      key:i,
      label: response.data[i].medname,
      price: response.data[i].medprice,
      number:1,
      disabled:false
    });
  }
    console.log(data)
    return data
  } catch (error) {
    console.error("获取药品信息失败：", error);
    throw error;
  }
};

const data = ref([])
Medicinements(data)
// console.log(data)
// const rightValue = ref([1])
// const leftValue = ref([1])


const handleChange = (
  value: number[] | string[],
  direction: 'left' | 'right',
  movedKeys: string[] | number[]
) => {
  console.log(value, direction, movedKeys)
}
</script>
  <style scoped>
#treatMent {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.edit_fei {
    :deep(.el-transfer-panel) {
      width: 350px !important;
    }
  }
.test{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  column-count: 3;
}
</style>
<!-- 
function created() {
  throw new Error('Function not implemented.')
} -->
  